<template>
  <div id="" class="con">
    <img :src="imgUrlLink(friendItem.headPortrait)" alt="" width="100" height="80">
    <div class="">
      <span>
        <img src="@/assets/indexImage/personal_icon.png" alt="" width="10">
        {{friendItem.nickName}}
      </span>
      <p>网球俱乐部</p>
      <em>
        <img src="@/assets/activityImage/add_blue3.png" alt="" width="12">
        泉州侨乡体育馆
      </em>

    </div>
  </div>
</template>
<script>
export default {
  name: "",
  props: ['friendItem'],
  data: () => ({

  }),
  methods: {
    // 图片地址拼接
    imgUrlLink(imgUrl) {
      return this.$imgUrlLink(imgUrl);
    }
  }
}
</script>
<style lang="scss" scoped>
.con{
  @include flex;
  padding: 10px;
  background: white;
  div{
    @include flexcell;
    margin-left: 10px;
    height: 80px;
    @include flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    span{
      color: $blueColor;
    }
    em{
      color: $lightColor;
      font-size: 12px;
    }
  }
}
</style>
